import { useEffect, useRef, useState } from 'react'
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css"
import useCurrentUser from '@/utils/useCurrentUser';
import EditorItem from '../DragModal/EditorItem';
import './index.less'
import { Button, Image } from 'antd';
function Limit({ content, style = {}, editable = false, onChange = async (val) => { }, loading = false }) {
  //定义 ref
  const divRef = useRef(null);
  const { currentUser } = useCurrentUser();
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(content);

  useEffect(() => {
    setValue(content);
  }, [content]);


  //初始化 AiEditor
  useEffect(() => {
    if (divRef.current) {
      const aiEditor = new AiEditor({
        element: divRef.current,
        placeholder: "点击输入内容...",
        content: content,
        editable: false,
        theme: currentUser.theme,
      })
      return () => {
        aiEditor.destroy();
      }
    }
  }, [content, currentUser.theme, editing, divRef])



  const [preview, setpreview] = useState({
    visible: false,
  });


  const handleClick = (e) => {
    if (e.target.tagName !== 'IMG') {
      if (!editable) {
        return
      }
      setEditing(true);
      return;
    }
    let srcarr = [],
      current = 0;
    if (divRef?.current) {
      const imgTags = divRef.current.querySelectorAll('img');
      srcarr = Array.from(imgTags)?.map((el, i) => {
        if (el.src === e.target.src) {
          current = i + 1;
        }
        return el.src;
      });
    }
    setpreview((s) => ({
      current: current,
      urls: srcarr,
      visible: true,
    }));
  };



  return editing ? <div>
    <EditorItem value={value} onChange={setValue} />
    <div className="centerl" style={{ gap: 8, marginTop: 8 }}>
      <Button type="primary" loading={loading} size='small' onClick={async () => {
        await onChange(value);
        setEditing(false);
      }}>确定</Button>
      <Button size='small' type='text' onClick={() => {
        setEditing(false);
      }}>取消</Button>
    </div>
  </div> : (
    <div ref={divRef} className='limits' style={{ ...style }} key={currentUser.theme} onClick={handleClick}>
      <div
        style={{
          display: 'none',
        }}
      >
        <Image.PreviewGroup
          preview={{
            visible: preview?.visible,
            current: preview?.current - 1,
            onVisibleChange: (vis) =>
              setpreview((s) => ({
                ...s,
                visible: vis,
              })),
          }}
        >
          {preview?.urls?.map?.((it) => (
            <Image src={it} key={it} />
          ))}
        </Image.PreviewGroup>
      </div>
      <div className="aie-container" style={{ backgroundColor: "transparent", width: "100%", border: 'none', minHeight: 'auto' }}>
        <div className="aie-container-header" style={{ display: "none" }}></div>
        <div className="aie-container-main readonly" ></div>
      </div>
    </div>
  )
}

export default Limit